<template>
  <div>
    <el-row type="flex" class="mb10">
      <el-col>
        <el-input placeholder="请输入项目名称" style="width: 400px;" v-model="itemForm.title">
          <el-button type="primary" slot="append" @click="examSearch" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-divider style="top:0;" />
    <el-table border :columns="columns" :data="itemList" :loading="loading">
      <el-table-column label="id" align="center" #default="{row}">{{row.id}}</el-table-column>
      <el-table-column label="项目名称" align="center" #default="{row}">{{row.title}}</el-table-column>
      <el-table-column label="是否适用" align="center" #default="{row}">
        <el-switch
          v-model="row.isSelect"
          :value="row.isSelect"
          :active-value="1"
          :inactive-value="0"
          size="large"
          active-text="适用"
          inactive-text="不适"
          @change="onchangeStatus(row)"
        ></el-switch>
      </el-table-column>

    </el-table>
    <div class="acea-row row-right page">
      <el-pagination
        :total="total"
        show-elevator
        show-total
        :current-page="itemForm.page"
        @current-change="pageChange"
        :page-size="itemForm.limit"
      />
    </div>
  </div>
</template>

<script>
import { getItemListApi } from '@/api/onsite';
export default {
  name: 'selectItemList',
  props: {
    item_ids: 0,
  },
  data() {
    return {
      open_model: false,
      columns: [
        {
          title: 'id',
          key: 'id',
          align: 'center',
        },
        {
          title: '项目名称',
          key: 'title',
          align: 'center',
        },
        {
          title: '是否适用',
          slot: 'isSelect',
          align: 'center',
        },
      ],
      itemList: [],
      loading: false,
      itemForm: {
        status: '0,1',
        title: '',
        page: 1,
        limit: 10,
      },
      item_ids_arr: [],
      item_names_arr: [],
      total: 0,
    };
  },
  mounted() {
    this.open_model = true;
    this.getList();
  },
  methods: {
    getList() {
      //  获取项目列表

      // 循环已选中的项目
      // this.item_ids
      this.loading = true;
      getItemListApi(this.itemForm)
        .then((res) => {
          let list = res.list;
          for (let i = 0; i < list.length; i++) {
            list[i]['isSelect'] = 0;
          }
          if (this.item_ids) {
            let item_ids_arr = this.item_ids.split(',');
            this.item_ids_arr = item_ids_arr;

            for (let i = 0; i < list.length; i++) {
              list[i]['isSelect'] = 'open';
              for (let ii = 0; ii < item_ids_arr.length; ii++) {
                if (list[i]['id'] == item_ids_arr[ii]) {
                  list[i]['isSelect'] = 1;
                  this.item_names_arr.push(list[i]['title']);

                  break;
                } else {
                  list[i]['isSelect'] = 0;
                }
              }
            }
          }
          this.itemList = list;
          this.total = res.total;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$Message.err(err.msg);
        });
    },
    // 分页
    pageChange(index) {
      this.itemForm.page = index;
      this.getList();
    },
    // 关闭弹框
    cancel() {
      this.itemForm = {
        page: 1,
        limit: 10,
        place_id: 0,
      };
    },
    // 搜索方法
    examSearch(title) {
      this.getList();
    },
    // 开通或关闭
    onchangeStatus(row) {
      if (row.isSelect) {

        // 设置为适用
        this.item_ids_arr.push(row.id);
        this.item_names_arr.push(row.title);
      } else {
        this.item_ids_arr = this.item_ids_arr.filter((item) => item != row.id);
        this.item_names_arr = this.item_names_arr.filter((item) => item != row.title);
      }
      console.log('item_ids', this.item_ids_arr,this.item_names_arr);

    },
  },
};
</script>

<style scoped lang="stylus"></style>